<template>
  <map-marker-filter
    v-model="selectMenus"
    v-bind="$attrs"
    :data-list="filterMenus"
    :area-controller="areaController"
    :community-controller="communityController"
    :grid-controller="gridController"
    :default-unchecked-keys="defaultUncheckedMarkers"
  />
</template>

<script>
import MapMarkerFilter from '../../../components/gis-map/map-filter/map-marker-filter.vue';
import legends from '../../../components/gis-map/map-filter/js/filter-legends.js';
import { getMarkerLegendIcon } from '../../../components/gis-map/js/icon.js';
import { replaceFields } from '@gis/lib/utils';

export default {
  name: 'map-command-dispatching-filter',
  components: { MapMarkerFilter },
  props: {
    markerLegends: { default: undefined },
    defaultUncheckedMarkers: { default: undefined },
    areaController: { type: Boolean, default: true },
    communityController: { type: Boolean, default: true },
    gridController: { type: Boolean, default: true },
  },
  data() {
    return {
      filterMenuData: {},
      filterMenus: [],
      selectMenus: [],
    };
  },
  async created() {
    await this.getDataAsync();
    this.$watch(
      () => this.markerLegends,
      () => {
        this.updateFilterMenu();
      },
      { immediate: true }
    );
  },
  methods: {
    async getDataAsync() {
      const list = replaceFields(legends, {
        icon: (item) => {
          return getMarkerLegendIcon(item.icon);
        },
        label: 'name',
        value: 'type',
        children: 'nodes',
      });
      this.filterMenuData = list.reduce((res, item) => {
        return Object.assign(res, { [item.value]: item });
      }, {});
    },
    updateFilterMenu() {
      if (!this.markerLegends || !this.markerLegends.length) {
        this.filterMenus = [];
      }
      this.filterMenus = this.markerLegends.map((type) => this.filterMenuData[type]).filter(Boolean);
      // console.log(this.filterMenus, '菜单');
    },
  },
};
</script>
